<template>
    <div class="transferTable_blcok">
        <el-row :gutter="0" type="flex" justify="space-around" class="transferTable_main">
            <el-col :span="7" class="transferTableBox">
                <div class="title">
                    <div>车辆</div>
                    <div>已选2辆</div>
                </div>

                <div class="search_box">
                    <el-input placeholder="车牌号" v-model="vehicleNumber" @keyup.enter.native="searchWay"></el-input>
                </div>
                <div style="margin;:20px;width: 100%;">
                    <el-table :row-key="getRowKey" ref="staffTable" v-loading="listLoading" :data="staffList" fit
                        highlight-current-row @selection-change="handleStaffChange"
                        :max-height="'300px'"
                        >
                        <el-table-column type="selection" :reserve-selection="true" width="55"
                            :selectable="selectable"></el-table-column>
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column label="车牌号" align="center">
                            <template slot-scope="{row}">
                                <span>{{ row.vehicleNumber }}</span>
                            </template>
                        </el-table-column>


                    </el-table>
                </div>

            </el-col>
            <el-col :span="1" style="text-align:center;">
                <el-button @click="addStaff" type="primary" :disabled="!staffData.length"
                    icon="el-icon-arrow-right"></el-button>
                <el-button @click="removeStaff" type="primary" :disabled="!selectedStaffData.length"
                    icon="el-icon-arrow-left" style="margin-left: 0;margin-top: 10px;"></el-button>
            </el-col>
            <el-col :span="12" class="transferTableBox">
                <div class="title">
                    <div>车辆</div>
                    <div>已选2辆</div>
                </div>

                <div class="search_box">
                    <el-input placeholder="车牌号" v-model="vehicleNumber2" ></el-input>
                </div>
                <div style="margin;:20px;width: 100%;">
                    <el-table  :max-height="'300px'" :row-key="getRowKey" ref="selectedStaffTable" v-loading="listLoading"
                        :data="selectedStaffList" fit highlight-current-row @selection-change="handleSelectedStaffChange">
                        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column label="车牌号" align="center">
                            <template slot-scope="{row}">
                                <span>{{ row.vehicleNumber }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="关联关系" align="center">
                            <template slot-scope="scope">
                                <el-select style="width:100%" v-model="scope.row.relate" placeholder="关联关系" filterable>
                                    <el-option v-for="(item, index) in relatedOptions" :key="index" :value="item.value"
                                        :label="item.label" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="车辆状态" align="center">
                            <template slot-scope="scope">
                                <el-select style="width:100%" v-model="scope.row.vehicleStatus" placeholder="车辆状态"
                                    filterable>
                                    <el-option v-for="(item, index) in vehicleStatusOptions" :key="index"
                                        :value="item.value" :label="item.label" />
                                </el-select>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </el-col>
        </el-row>
        <!-- <el-button  @click="modifyStaff()"  type="primary"  size="small">提交</el-button> -->


    </div>
</template>

<script>
import beiGangApi from '@/api/logistics/beigang';
import masterDataApi from '@/api/logistics/masterData'
import { searchUser } from '@/api/remote-search';

export default {
    name: 'TransferTable',
    props: {

        id: {
            type: String,
            default: undefined
        },
    },
    data() {
        return {
            vehicleStatusOptions: [
                { label: '停用', value: 0 },
                { label: '可用', value: 1 },
            ],
            relatedOptions: [
                { label: '自有', value: 0 },
                { label: '临时', value: 1 },

            ],
            vehicleNumber2: '',
            vehicleNumber: '',
            listLoading: false,
            staffTemp: {
                phone: "",
                nickName: "",
                staffTypeId: ""
            },
            staffList: [

            ],
            selectedStaffList: [],
            staffData: [],
            selectedStaffData: [],
            tableKey: 0,
            rowKey: "rowKey",
            staffOptions: [
                { key: 28, display_name: "补货员" },
                { key: 29, display_name: "测试员" }
            ],
        }
    },
    mounted() {
        this.getVehicleInfoList()
        // 获取右侧已经关联车辆
        this.getRelevanceVehicleTableList()
    },

    methods: {
        searchWay(event){
            this.getVehicleInfoList()
            // if(event.keyCode==13){
             
            // }
          
        },
        getRelevanceVehicleTableList() {
            let params = {
                companyId: this.id,
                pageSize: 999,
                pageNum: 1
            }
            // 
            beiGangApi.logisticsCompanyQueryRelate(params).then(res => {
                if (res.code == 200) {
                    this.selectedStaffList = res.rows
                    // .map(item=>{
                    //     return {
                    //         ...item,
                    //         emissionStandard: this.optionsFilter(
                    //             item.emissionStandard,
                    //         "emissionStandard"
                    //     ),
                    //     }
                    // })


                }
            })
        },
        selectable(row, index) {

            if (row.isActive == 1) {
                return true
            } else {
                return false
            }
        },

        // 获取左侧车辆列表信息
        getVehicleInfoList() {
            let params = {
                pageSize: 999,
                pageNum: 1,
                vehicleNumber:this.vehicleNumber,
            }
            masterDataApi.vehicleInfoList(params).then(res => {
                if (res.code == 200) {
                    this.staffList = res.rows

                }
            })
        },
        getRowKey(row) {
            return row.id;
        },
        // 将左边表格选择项存入staffData中
        handleStaffChange(rows) {
            this.staffData = [];
            if (rows) {
                rows.forEach(row => {
                    if (row) {
                        this.staffData.push(row);
                    }
                });
            }
        },
        // 左边表格选择项移到右边
        addStaff() {
            setTimeout(() => {
                this.$refs["staffTable"].clearSelection();
                this.$refs["selectedStaffTable"].clearSelection();
            }, 0);
            let repeat = false;
            this.selectedStaffList.forEach(item => {
                if (this.staffData[0] ) {
                    if(item.vehicleId === this.staffData[0].id
                    ||item.vehicleId === this.staffData[0].vehicleId
                    ||item.id === this.staffData[0].id
                    ||item.id === this.staffData[0].vehicleId
                    ){
                        repeat = true;
                    this.$message.warning("已添加");
                    return;
                    }
                    
                }
            });
            if (repeat === false) {
                this.staffData.forEach(item => {
                    this.selectedStaffList.push(item);
                });
                for (let i = 0; i < this.staffList.length; i++) {
                    for (let j = 0; j < this.staffData.length; j++) {
                        if (
                            this.staffList[i] &&
                            this.staffData[j] 
                            
                        ) {
                            if(this.staffList[i].id === this.staffData[j].id
                            ||this.staffList[i].id === this.staffData[j].vehicleId
                            ||this.staffList[i].vehicleId === this.staffData[j].id
                            ||this.staffList[i].vehicleId === this.staffData[j].vehicleId

                            ){
                                this.staffList.splice(i, 1);
                            }
                            
                        }
                    }
                }
            }
        },
        // 右边表格选择项移到左边
        removeStaff() {
            setTimeout(() => {
                this.$refs["staffTable"].clearSelection();
                this.$refs["selectedStaffTable"].clearSelection();
            }, 0);
            this.selectedStaffData.forEach(item => {
             
                this.staffList.push(item);
            });
            // for (let j = 0; j < this.selectedStaffData.length; j++) {
            //     for (let i = 0; i < this.staffList.length; i++) {
            //         if (
            //             this.staffList[i] &&
            //             this.selectedStaffData[j] 
                        
            //         ) {
            //         if(this.staffList[i].id !== this.selectedStaffData[j].id
            //         ||this.staffList[i].vehicleId !== this.selectedStaffData[j].id
            //         ||this.staffList[i].id !== this.selectedStaffData[j].vehicleId
            //         ||this.staffList[i].vehicleId!== this.selectedStaffData[j].vehicleId
            //         ){
            //             this.staffList.push(this.selectedStaffData[j]);
            //         }else{
                     
            //         this.$message.warning("重复已添加");
            //         return;
            //         }
                    
            //         }
            //     }
            //     }

            for (let i = 0; i < this.selectedStaffList.length; i++) {
                for (let j = 0; j < this.selectedStaffData.length; j++) {
                    if (
                        this.selectedStaffList[i] &&
                        this.selectedStaffData[j] 
                        
                    ) {
                    if(this.selectedStaffList[i].id === this.selectedStaffData[j].id
                    ||this.selectedStaffList[i].vehicleId === this.selectedStaffData[j].id
                    ||this.selectedStaffList[i].id === this.selectedStaffData[j].vehicleId
                    ||this.selectedStaffList[i].vehicleId === this.selectedStaffData[j].vehicleId
                    ){
                        this.selectedStaffList.splice(i, 1);
                    }
                        
                    }
                }
            }
        },
        // 将右边表格选择项存入selectedStaffData中
        handleSelectedStaffChange(rows) {
            this.selectedStaffData = [];
            if (rows) {
                rows.forEach(row => {
                    if (row) {
                        this.selectedStaffData.push(row);
                    }
                });
            }
            this.$emit('submit', this.selectedStaffData)
        },
        // 提交
        modifyStaff() {
            console.log("this.selectedStaffList", this.selectedStaffList)
        },

    }

}
</script>

<style lang="scss" scoped>
/* .transfersBlock{
   margin: 20px 0;
    
} */
.transferTableBox {
    border: 2px solid #E9E9E9;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.transferTable_blcok {
    margin: 20px 0;
}

.transferTable_main {
    display: flex;
    align-items: center;
}

.title {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 2px solid #E9E9E9;
}

.search_box {
    margin: 30px 0;
    width: 50%;
    display: flex;
    text-align: center;
}</style>